<template>
  <div class="system-customer">
    <xr-header icon-class="wk wk-double-gear" icon-color="#1CBAF5" label="自定义字段设置"/>
    <div class="customer-content">
      <el-table v-loading="loading" :data="tableList" :height="tableHeight" highlight-current-row
                style="width: 100%">
        <el-table-column prop="name" label="模块" show-overflow-tooltip>
          <template v-slot:default="scope">
            <img :src="getCustomFieldIcon( scope.row.label)" class="table-item-icon">
            <span class="table-item-label">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="更新时间" show-overflow-tooltip>
          <template v-slot:default="scope">
            <span class="table-item-time">{{ scope.row.updateTime == 0 ? '暂无' : scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot:default="scope">
            <el-button link size="small" @click="handleCustomField('edit', scope.row, scope.$index)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {customFieldIndexAPI} from '/src/api/admin/crm.js'

import XrHeader from '/src/components/XrHeader/index.vue'
import {useRouter} from "vue-router";

defineOptions({
  name: 'CustomField',
})


const optionData = reactive(({
  loading: false,
  tableHeight: document.documentElement.clientHeight - 140, // 表的高度
  // 自定义字段设置
  tableList: []
}))

const {loading,tableHeight,tableList } = toRefs(optionData)


/**
 * 详情
 */
function getDetail() {
  optionData.loading = true
  customFieldIndexAPI()      .then(res => {
        console.log("res", res)
    optionData.tableList = res.data.data
    optionData.loading = false
      })
      .catch(() => {
        optionData.loading = false
      })
}

const router = useRouter();
/**
 * 列表的编辑和预览
 */
function handleCustomField(type, item, index) {
  if (type === 'edit') {
    router.push({
      path: '/admin/fields/index',
      query: {
        type: {
          1: 'crm_leads',
          2: 'crm_customer',
          3: 'crm_contacts',
          4: 'crm_product',
          5: 'crm_business',
          6: 'crm_contract',
          7: 'crm_receivables',
          8: 'crm_receivables_plan',
          17: 'crm_visit',
          18: 'crm_invoice'
        }[item.label],
        id: 'none',
        label: item.label
      }
    })
  }
}

/**
 * 根据自定义字段types 获取展示icon
 */
function getCustomFieldIcon(label) {
  if (label === 1) {
    return ('/src/assets/img/crm/leads.png')
  } else if (label === 2) {
    return ('/src/assets/img/crm/customer.png')
  } else if (label === 3) {
    return ('/src/assets/img/crm/contacts.png')
  } else if (label === 5) {
    return ('/src/assets/img/crm/business.png')
  } else if (label === 6) {
    return ('/src/assets/img/crm/contract.png')
  } else if (label === 4) {
    return ('/src/assets/img/crm/product.png')
  } else if (label === 7) {
    return ('/src/assets/img/crm/receivables.png')
  } else if (label === 8) {
    return ('/src/assets/img/crm/receivablesPlan.png')
  } else if (label === 17) {
    return ('/src/assets/img/crm/visit.png')
  } else if (label === 18) {
    return ('/src/assets/img/crm/invoice.png')
  }
  return ('/src/assets/img/crm/product.png')
}

function created() {
  // 控制table的高度
  window.onresize = () => {
    self.tableHeight = document.documentElement.clientHeight - 140
  }

  getDetail()
}
created()

</script>

<script>


export default {


  components: {
    XrHeader
  },

  data() {
    return {

    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.system-customer {
  height: 100%;
}

.customer-content {
  border-top: 1px solid $xr-border-line-color;
  border-bottom: 1px solid $xr-border-line-color;
}

.table-item-label {
  vertical-align: middle;
}

.table-item-icon {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 4px;
}

.table-item-time {
  color: #999;
}

.el-table {
  :deep(.el-table__body td) {
    height: 60px;
  }
}
</style>
